<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { on, off } from "@/utils/modal.js"
import _ from "lodash-es"
const props = defineProps({
  modalName: {
    type: String,
    default: ""
  },
  width: {
    type: String,
    default: ""
  },
  submit: {
    default: () => { },
    type: Function
  },
  type: {
    default: "dialog",
    type: String
  }
});
const emit = defineEmits(['open', 'opened', 'close', 'submit'])
const modalShow = ref(false);
const argData = ref()

onMounted(() => {
  on(props.modalName, {
    open: (arg) => {
      console.log("open")
      modalShow.value = true;
      argData.value = arg
    },
    close: (arg) => {
      console.log("close")
      modalShow.value = false;
    }
  })

})
const handleModalOpen = () => {
  emit('open', _.cloneDeep(argData.value))
}
const handleModalOpened = () => {
  emit('opened', _.cloneDeep(argData.value))
}
const handleModalClose = () => {
  emit('close', _.cloneDeep(argData.value))
}
onUnmounted(() => {
  off(props.modalName);
})
</script>

<template>
  <component :is="'el-'+props.type" v-if="props.modalName" v-model="modalShow" :width="props.width ?? '640px'"
    @open="handleModalOpen" @opened="handleModalOpened" @close="handleModalClose">
    <slot></slot>
  </component>
</template>

<style scoped></style>
